//模拟服务器上的传递过来的数据
//思路：根据以上的数据动态创建a标签，添加到 .nav盒子中

let apiTypeData = [{
    name: "全部",
    keyword: "身份证实名",
    isnew: false
  },
  {
    name: "生活服务",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "金融科技",
    keyword: "短信",
    isnew: false
  },
  {
    name: "交通地理",
    keyword: "天气",
    isnew: false
  },
  {
    name: "充值缴费",
    keyword: "短信",
    isnew: false
  },
  {
    name: "数据智能",
    keyword: "手机归属地",
    isnew: false
  },
  {
    name: "企业工商",
    keyword: "IP",
    isnew: false
  },
  {
    name: "应用开发",
    keyword: "手机归属地",
    isnew: false
  },
  {
    name: "电子商务",
    keyword: "IP",
    isnew: false
  },
  {
    name: "吃喝玩乐",
    keyword: "视频",
    isnew: false
  },
  {
    name: "文娱视频",
    keyword: "视频",
    isnew: false
  },
  {
    name: "免费接口大全",
    keyword: "短信",
    isnew: true
  },
  {
    name: "短信",
    keyword: "身份证实名",
    isnew: false
  },
  {
    name: "汽车",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "核验",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "最新发布",
    keyword: "银行卡",
    isnew: true
  },
  {
    name: "API私有化部署",
    keyword: "身份证实名",
    isnew: true
  },
]
let apiLink = document.querySelector('.api-link')

//保存组装的数据
let apiNavName = ''
//遍历获取对象name属性,整合为一个数组,组装成a标签

apiTypeData.forEach(function (v) {
  //拼装数据
  //三元运算符判断添加加粗效果
  //添加自定义属性
  apiNavName += `
    <a href = '#' class = "${v.isnew ? 'active' : ''}" data-keyword = "${v.keyword}">${v.name}</a>
    `
})
//把数据放到apiLink里
apiLink.innerHTML = apiNavName;
//点击将内容渲染到search前的文字,把关键字渲染到input里
let searchContent = document.querySelector('.searchContent')
//   console.log(searchContent.textContent);
let search = document.querySelector('.search')
//使用事件委派,给apiLink添加注册事件,将当前事件源的文本渲染到searchContent, 获取当前事件源的自定义属性keyword,渲染给search
//  * 注意: 事件委派中this不能代表当前触发对象,慎用
// *       事件委派中: 事件源 - e.target
apiLink.addEventListener('click', function (e) {
  if (e.target.nodeName == 'A') {
    search.placeholder = e.target.dataset.keyword
    searchContent.textContent = e.target.textContent
  }


})

